<div class="forms-wrap">
    <!-- 基础信息 START -->
    <h3>基本信息</h3>
    <!-- 适用用户 -->
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            适用用户
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-checkbox-group
                [(ngModel)]="checkOptions"
                (ngModelChange)="changeCheckbox(checkOptions)">
            </nz-checkbox-group>
        </nz-form-control>
    </nz-form-item>

    <!-- 标题 -->
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            标题
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <input
                nz-input
                maxlength="20"
                placeholder="请输入标题"
                [(ngModel)]="formDatas.title"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item >

    <!-- 有效时间 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            有效时间
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="500px">
            <nz-date-picker
                [nzDisabledDate]="disabledStartDate"
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                [(ngModel)]="formDatas.beginTime"
                nzPlaceHolder="请选择开始时间">
            </nz-date-picker>
            <nz-date-picker
                #endDatePicker
                [nzDisabledDate]="disabledEndDate"
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                [(ngModel)]="formDatas.endTime"
                nzPlaceHolder="请选择结束时间">
            </nz-date-picker>
        </nz-form-control>
    </nz-form-item >
  
    <!-- 备注 -->
    <nz-form-item>
        <nz-form-label
            nz-col>
            备注
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-textarea-count [nzMaxCharacterCount]="100">
                <textarea
                    class="textarea-cont"
                    nz-input
                    maxlength="100"
                    placeholder="仅内部可见"
                    [(ngModel)]="formDatas.remark"
                    [disabled]="routeForms.mode == 2">
                </textarea>
            </nz-textarea-count>
        </nz-form-control>
    </nz-form-item >
    <!-- 基础信息 END -->
  
    <!-- 资源配置 START -->
    <h3 class="title-h">资源配置</h3>
    <!-- 跳转方式
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            跳转方式
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-radio-group
                [(ngModel)]="formDatas.type"
                [disabled]="routeForms.mode == 2">
                <label
                    *ngFor="let item of typeSet | keyvalue"
                    nz-radio
                    [nzValue]="item.key">
                    {{ item.value }}
                </label>
            </nz-radio-group>
        </nz-form-control>
    </nz-form-item> -->

    <!-- 跳转连接值
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            {{ typeSet[formDatas.type] || '链接' }}
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <input
                nz-input
                placeholder="请输入{{ typeSet[formDatas.type] || '链接' }}"
                [(ngModel)]="formDatas.url"
                (input)="oninputLink($event)"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item> -->

    <!-- 链接 -->
    <nz-form-item>
        <nz-form-label nz-col>链接</nz-form-label>
        <nz-form-control nz-col nzFlex="400px">
            <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择链接"
                [(ngModel)]="formDatas.url"
                [nzDisabled]="routeForms.mode == 2"
            >
                <ng-container *ngFor="let option of mappingOptions">
                    <nz-option [nzLabel]="option.name" [nzValue]="option.key"></nz-option>
                </ng-container>
            </nz-select>
            <p *ngIf="formDatas.url" class="mapping-remark">{{ remarkFilter(formDatas.url) }}</p>
        </nz-form-control>
    </nz-form-item>

    <!-- 参数 -->
    <nz-form-item>
        <nz-form-label nz-col>参数</nz-form-label>
        <nz-form-control nz-col nzFlex="400px">
            <input
                nz-input
                placeholder="请输入参数，多个参数用@符号隔开"
                [(ngModel)]="formDatas.params"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item>

    <!-- 图片信息 -->
    <nz-form-item>
        <nz-form-label
            nz-col
            nzRequired>
            图片信息
        </nz-form-label>
        <nz-form-control
            nz-col
            nzFlex="400px">
            <nz-upload
                class="upload-img-box"
                nzAccept="image/*"
                nzAction=""
                nzListType="picture-card"
                (nzChange)="onModalPreview($event)"
                [nzShowUploadList]="false">
                <ng-container *ngIf="!formDatas.imgUrl">
                    <i class="upload-icon" nz-icon [nzType]="uploadLoading ? 'loading' : 'plus'"></i>
                </ng-container>
                <img *ngIf="formDatas.imgUrl" [src]="formDatas.imgUrl" style="width: 100%" />
            </nz-upload>
        </nz-form-control>
    </nz-form-item >
    <!-- 资源配置 END -->

    <!-- 文字颜色 -->
    <nz-form-item>
        <nz-form-label nz-col nzRequired>文字颜色</nz-form-label>
        <nz-form-control nz-col nzFlex="400px">
            <nz-radio-group
                [nzDisabled]="routeForms.mode == 2"
                [(ngModel)]="formDatas.textColor">
                <label nz-radio nzValue="0">深色</label>
                <label nz-radio nzValue="1">浅色</label>
            </nz-radio-group>
        </nz-form-control>
    </nz-form-item>

    <!-- 背景颜色 -->
    <nz-form-item>
        <nz-form-label nz-col nzRequired>背景颜色</nz-form-label>
        <nz-form-control nz-col nzFlex="400px">
            <input
                nz-input
                placeholder="请输入背景颜色"
                [(ngModel)]="formDatas.backColor"
                [disabled]="routeForms.mode == 2">
        </nz-form-control>
    </nz-form-item>
  
    <!-- footer -->
    <div class="footer-wrap">
        <nz-divider></nz-divider>
        <div class="foot-btns">
            <app-bt-group
                *ngIf="routeForms.mode != 2"
                btType="dashed"
                btText="保存"
                [isLoading]="subLoading"
                (click)="preserData()">
            </app-bt-group>
  
            <app-bt-group
                btType="default"
                btText="返回">
            </app-bt-group>
        </div>
    </div>
</div>